<template>
    <div class="n-bill">
        <div class="nav-bar title-dot">
            <router-link to="/discover/toplist/" class="title">榜单</router-link>

            <span class="more">
                <router-link to="/discover/playlist/" class="fc">更多</router-link>
                <i class="right-arrow"></i>
            </span>
        </div>

        <div class="bill-list">
            <BillRankItem v-for="(item, index) in billRank" key="index" v-bind="{...item}" :orderRank="index"></BillRankItem>
        </div>
    </div>
</template>
<script setup>
import BillRankItem from './BillRankItem.vue';
import billRank from '@/json_data/bill_rank.json';
</script>

<style lang="scss" scoped>
.n-bill {

    .bill-list{
        height: 472px;
        margin-top: 20px;
        padding-left: 1px;

        background:url(../../../assets/bill_rank_img/index_bill.png);
    }

    .nav-bar {


        height: 33px;
        padding: 0 10px 0 34px;
        background-position: -225px -156px;
        border-bottom: 2px solid #C10D0C;

        .title {
            font-size: 20px;
            font-weight: normal;
            float: left;
            line-height: 28px;
        }


        .more {
            float: right;
            margin-top: 9px;

            .right-arrow {
                display: inline-block;
                width: 12px;
                height: 12px;
                margin-left: 4px;
                vertical-align: middle;

                background-position: 0 -240px;
            }
        }
    }

}
</style>
